/*
 * @Description: 列表组件
 * @Author: buwei.huang
 * @Date: 2019-06-17 15:22:58
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-06-17 15:23:56
 */
<template>
  <scroll
    class="station_list_main"
    ref="scroll"
    :useBody="useBody"
    :getListData="getListDataByScroll"
    :up="up"
  >
    <div class="station_list">
      <template v-for="(item,index) in stationInfo.stationList">
        <station-list-item
          :item="item"
          :index="index"
          :key="index"
          @onChangeRoute="onChangeRoute"
          @onCollect="onCollect"
          @goToRoute="goToRoute"
        />
      </template>
    </div>
  </scroll>
</template>
<script>
import { getStationDetailsInfo } from '../api/api.js'
import { goToLine } from '@/utils/RouteTableUtils.js'
import { isRouteCollected, setRouteCollected } from '@/utils/CollectionUtils.js'
import { sortList } from '../utils/sort.js'
import StationListItem from './StationListItem'
import scroll from './scroll'
export default {
  components: {
    scroll,
    'station-list-item': StationListItem
  },
  props: {
    busInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      stationInfo: {
        stationCount: '',
        stationList: []
      },
      // 是否使用body作为滑动容器
      useBody: false,
      up: {
        noMoreSize: 11,
        page: { size: 10 }
      }
    }
  },
  methods: {
    getListDataByScroll(pageIndex, pageSize) {
      return getStationDetailsInfo(pageIndex, pageSize, this.busInfo.ID).then(res => {
        let stationList = []
        if (res.stationList.length > 0) {
          stationList = res.stationList
          stationList.map((item, index) => {
            // 如果存在上行线路,则默认显示上行; 如没有,则显示下行
            if (item.upBusesInfoModel) {
              item.showDown = false
            } else {
              item.showDown = true
            }
          })
        }
        this.stationInfo.stationCount = res.stationCount
        this.stationInfo.stationList = pageIndex > 1 ? this.stationInfo.stationList.concat(stationList) : stationList
        // 处理排序
        this.stationInfo.stationList = sortList(this.stationInfo.stationList)
        return { length: pageSize, count: res.stationCount }
      })
    },
    // 改变上行下行线路
    onChangeRoute(item, index) {
      if (item.upBusesInfoModel && item.downBusesInfoModel) {
        this.stationInfo.stationList[index].showDown = !this.stationInfo.stationList[index].showDown
      }
    },
    // 收藏线路
    onCollect(item) {
      let data
      // 判断收藏的是上行还是下行
      if (!item.showDown) {
        item.upBusesInfoModel.isCollect = !item.upBusesInfoModel.isCollect
        data = { ...item.upBusesInfoModel }
      } else {
        item.downBusesInfoModel.isCollect = !item.downBusesInfoModel.isCollect
        data = { ...item.downBusesInfoModel }
      }
      // 收藏
      isRouteCollected(data.subRouteId, data.type).then(async isCollect => {
        let state = await setRouteCollected(
          isCollect,
          data.subRouteId,
          data.type,
          data.busName,
          data.busStartStation,
          data.busEndtStation,
          data.startTime,
          data.endTime,
          data.price
        )
        let toastMsg
        if (state) {
          toastMsg = '收藏成功'
        } else {
          toastMsg = '取消收藏'
        }
        this.$toastMsg(toastMsg)
      })
    },
    // 跳转线路
    goToRoute(paramsStr) {
      goToLine(paramsStr)
    }
  }
}
</script>
<style>
.station_list_main {
}
.station_item {
  height: 130px;
}
.station_list {
  background-color: #fff;
}
</style>
